<!DOCTYPE html>
<html lang="en">
<#header />
<body>
    <div class="layui-fluid" style="padding-top:20px;">
        <div class="layui-row layui-elem-quote" style="margin-left:0px;margin-right:0px;">
            <form class="layui-form layui-form-pane">
                <div class="layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" id="username" name="username" placeholder="输入用户名以搜索" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-md-offset1">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户状态</label>
                        <div class="layui-input-block">
                            <select id="status" name="status" lay-search>
                                <option value="">请选择</option>
                                <option value="0">正常</option>
                                <option value="1">冻结</option>
                                <option value="2">禁止</option>
                            </select>
                        </div>
                    </div>
                </div>
            </form>
                <div class="layui-col-md2 layui-col-md-offset1">
                     <button id="queryBtn" class="layui-btn" ><i class="layui-icon">&#xe615;</i>搜索</button>
                </div>

        </div>
        <div class="layui-row">
            <div class="layui-btn-group">
                <button id="newBtn" class="layui-btn layui-btn-small">
                    <i class="layui-icon">&#xe654;</i>新增
                </button>
            </div>
        </div>
        <div class="layui-row">
            <table id="userTB" lay-filter="userTB">
            </table>
            <script>
                layui.use(["element","form","table","jquery","layer"],function(){
                    var element = layui.element;
                    var form = layui.form;
                    var table = layui.table;
                    var $ = layui.$;
                    var layer = layui.layer;
                    var tableObj = table.render({
                        skin:"row",
                        even:true,
                        size:"sm",
                        loading:true,
                        elem:'#userTB',
                        height:315,
                        url:'/user/list.btl',
                        page:true,
                        cols:[[{checkbox:true}
                            ,{field:'id',title:'序号',width:80,sort: true}
                            ,{field:'username',title:'用户名',width:300}
                            ,{field:'nickname',title:'姓名',width:300}
                            ,{fixed:'right',title:'操作',width:295,align:'center',toolbar:'#bar'}]]
                    });

                    table.on('tool(userTB)',function(obj){
                        var data = obj.data; //获得当前行数据
                        var layEvent = obj.event; //获得 lay-event 对应的值
                        var tr = obj.tr; //获得当前行 tr 的DOM对象

                        if(layEvent === 'detail'){ //查看
                            //do somehing
                            var id = data.id;
                            var index = layer.open({
                                type: 2,
                                title: '查看用户',
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['1000px', '400px'],
                                content: '/user/view.btl?id='+id,
                                zIndex: layer.zIndex,
                                scrollbar: true,
                            });
                            layer.full(index);
                        } else if(layEvent === 'del'){ //删除
                            layer.confirm('真的删除行么', function(index){
                                $.post("/user/del.btl",{id:data.id},function(data){

                                })
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                            });
                        } else if(layEvent === 'edit') { //编辑
                            //do something
                            var id = data.id;
                            var index = layer.open({
                                type: 2,
                                title: '更新用户',
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['1000px', '400px'],
                                content: '/user/update.btl?id='+id,
                                zIndex: layer.zIndex,
                                scrollbar: true,
                            });
                            layer.full(index);
                        }
                        });

                        $("#newBtn").on("click", function () {
                            var index = layer.open({
                                type: 2,
                                title: '新增用户',
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['1000px', '400px'],
                                content: '/user/create.btl',
                                zIndex: layer.zIndex,
                                scrollbar: true,
                                end: function () {
                                    tableObj.reload({});
                                }
                            });
                            layer.full(index);
                        });
                        $("#queryBtn").on("click", function () {
                            tableObj.reload({
                                where:{
                                    username:$("#username").val(),
                                    status:$("#status").val()
                                }
                            });
                        });

                    });
            </script>

            <script type="text/html" id="bar">
                <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
            </script>


        </div>

    </div>
</body>
</html>